<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 高度塌陷 子元素浮动后撑不开父元素
        BFC 块级格式化环境  是CSS隐含属性开启BFC该元素会变成一个独立的布局区域 */
        /* 1.开启BFC的元素不会被浮动元素覆盖
           2. 开启BFC的元素子元素和父元素的外边距不会重叠
           3.开启BFC的元素可以包含浮动的子元素
           
           开启方法
           父元素直接设置浮动例如 float:left
           将元素设置为行内块
           将overflow设置一个非visible的值例如overflow:auto或hidden*/
        header,main,footer{
            width: 1000px;
            margin: 0,auto;
        }
        header{
            width: 1000px;
            height: 150px;
            background-color: silver;
            margin: 0 auto;
        }
        main{
            height: 500px;
            background-color: #bfa;
            margin: 10px auto;
        }
        nav{
            float: left;
            width: 200px;
            height: 100%;
            background-color: yellow;
        }
        article{
            float: left;
            width: 600px;
            height: 100%;
            background-color: orange;
        }
        aside{
            float: left;
            width: 200px;
            height: 100%;
            background-color: pink;
        }
        footer{
            height: 150px;
            background-color: tomato    ;
        }
    </style>
</head>
<body>
  <header>

  </header>  
  <main>
        <nav>

        </nav>
        <article>

        </article>
        <aside>

        </aside>
  </main>
  <footer>

  </footer>
</body>
</html>